<template>
    <div class="Box">
        <div class="box">
            <div>
                <img src="../imges/d.png" alt="">
            </div>
            <el-form :model="formLabelAlign" style="max-width: 460px">
                <el-form-item>
                    <el-input style="width: 260px;height: 50px;" v-model="formLabelAlign.username" placeholder="请输入用户名称">
                        <template #prefix>
                            <el-icon class="custom-icon">
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input style="width: 260px;height: 50px;" v-model="formLabelAlign.password" placeholder="请输入登录密码">
                        <template #prefix>
                            <el-icon class="custom-icon2">
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
            </el-form>
            <el-button @click="submitForm" type="primary"
                style="background-color: rgb(69, 198, 174);width: 260px;height: 50px;">登录</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { loginApi } from "../api/WuJiApi/axios";


const router = useRouter()
let formLabelAlign = reactive({
    username: '',
    password: '',
})
//登录
let submitForm = async () => {
    const { data }: { [propsName: string]: any } = await loginApi(formLabelAlign)
    console.log(123, data);

    if (data.code == 0) {
        ElMessage({
            message: '登陆成功',
            type: 'success',
        })
        sessionStorage.setItem('token', data.token)
        sessionStorage.setItem('power', JSON.stringify(data.power))
        router.push('/home')
    } else {
        ElMessage({
            type: 'success',
            message: '账号或密码错误'
        })
    }

}
</script>

<style scoped lang="less">
.custom-icon {
    width: 16px;
    height: 16px;
    background-image: url('../imges/a.png');
    background-size: cover;
}

.custom-icon2 {
    width: 16px;
    height: 16px;
    background-image: url('../imges/b.png');
    background-size: cover;
}

img {
    width: 200px;
    height: 40px;
    margin-bottom: 100px;
    margin-left: 20px;
}

.Box {
    height: 100%;
    background-image: url('../imges/e.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    justify-content: center;
    align-content: center;
}
</style>